import React from 'react';
import { Toast } from 'antd-mobile';

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
            toMax: false,
            id: props.match.params.id,
            status: props.match.params.status,  //1--课程订单  2--活动订单
            paytype: '',  //4--支付宝  3--微信  2--鲜花  1-积分
            rmb: 0,
            flower: 0,
            money: 0,
            data: [],
            pid:0,
        }
    }
	componentDidMount(){
        document.title = '支付'
        var url;
        if(this.state.status==1){
            url='order/detail'
        }else{
            url='user/active_detail'
        }
        global.Ajax.hhtc_request(url,{id: this.state.id}).then(data=>{
			if(data.code===1){
                this.setState(data.data)
			}
		})
    }
    // 选择支付方式
    check(paytype){
        this.setState({
            paytype
        })
    }
    // 支付
    pay(){
        var url,req;
        if(this.state.paytype===''){
            return Toast.fail('请选择支付方式!',1)
        }
        Toast.loading()
        if(this.state.paytype===2 ){
            url='pay/pay'
            req={
                id: this.state.id,
                type: 2,
                status: this.state.status,
            }
        }else if(this.state.paytype===3){
            url='pay/wxpay'
            req={
                id: this.state.id,
                status: this.state.status,
            }
        } else if (this.state.paytype===4) {
            url='pay/pay'
            req={
                id: this.state.id,
                type: 4,
                status: this.state.status,
            }
        } 

        global.Ajax.hhtc_request(url,req).then(data=>{
            Toast.hide()
			if(data.code===1){
				if(this.state.paytype===2){
                    Toast.success(data.msg,1,()=>{
                        if(this.state.status==1){
                            // this.props.history.replace('/page/home/user/orderlist')
                            this.props.history.push('/page/home/learn/learndetail/'+this.state.pid);
                        }else{
                            // this.props.history.replace('/page/home/user/activity')
                            this.props.history.push('/page/home/signup/detail/'+this.state.pid);
                        }
                    })
                }else if(this.state.paytype===3){
                    this.weixinpay(data.data);
                    // console.log(data)
                    // window.location.href='https://yikan.cdhhtc.cn/#/page/home/user/orderlist'
                    // window.location.href=data.data+'&redirect_url=https://yikan.cdhhtc.cn/#/page/home/user/orderlist'
                }
			}else{
                Toast.fail(data.msg,1);
            }
		})
    }

    weixinpay(paydata){
        console.log(paydata);
        const onBridgeReady='';
        if (typeof WeixinJSBridge === "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
            }
        } else {
            window.WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    appId: paydata.appid,
                    timeStamp: paydata.timeStamp,
                    nonceStr: paydata.nonceStr,
                    package: paydata.package,
                    signType: 'MD5',
                    paySign: paydata.paySign
                },
                function (res) {
                    if (res.err_msg === "get_brand_wcpay_request:ok") {
                        return Toast.success('支付成功', 1, () => {
                            // TODO 支付成功
                            // window.location.reload();
                            // this.props.history.push('/page/home/my/order/orderlist/2');
                            window.location.href='https://yikan.cdhhtc.cn/#/page/home/user/orderlist';
                        })
                    } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
                        Toast.info('取消支付', 1)
                    } else if (res.err_msg === "get_brand_wcpay_request:fail") {
                        Toast.info('支付失败', 1)
                    }
                }
            )
        }
    }
    
	render(){
		return(
			<div className='pay_box'>
                <p className='p1'>支付金额</p>
                <div className='pri'>
                    {this.state.paytype===3&&<span>￥</span>}
                    <p>{this.state.money*1}</p>
                    {/* <spn style={{padding: '3vw 3vw 0'}}>+</spn>
                    <p>26</p> */}
                    {this.state.paytype===2&&<img alt='' src={require('../../imgs/hua.png')} className='hua' />}
                    {this.state.paytype===4&&<img alt='' src={require('../../imgs/999.png')} className='hua' />}
                </div>
                <p className='xz'>选择支付方式</p>
                {/* <div className='pay_item'>
                    <img alt='' src={require('../../imgs/alipay.png')} className='icon' />
                    <p>支付宝</p>
                    {this.state.paytype===4?<img alt='' src={require('../../imgs/gou3.png')} className='gou' />:<img alt='' src={require('../../imgs/gou1.png')} className='gou' onClick={this.check.bind(this,4)} />}
                </div> */}
                <div className='pay_item'>
                    <img alt='' src={require('../../imgs/wechat.png')} className='icon' />
                    <p>微信</p>
                    {this.state.paytype===3?<img alt='' src={require('../../imgs/gou3.png')} className='gou' />:<img alt='' src={require('../../imgs/gou1.png')} className='gou' onClick={this.check.bind(this,3)} />}
                </div>
                <div className='pay_item'>
                    <p>鲜花支付 (余额：{this.state.flower*1}朵)</p>
                    {this.state.paytype===2?<img alt='' src={require('../../imgs/gou3.png')} className='gou' />:<img alt='' src={require('../../imgs/gou1.png')} className='gou' onClick={this.check.bind(this,2)} />}
                </div>
                <div className='pay_item'>
                    <p>水晶支付 (余额：{this.state.crystal*1})</p>
                    {this.state.paytype===4?<img alt='' src={require('../../imgs/gou3.png')} className='gou' />:<img alt='' src={require('../../imgs/gou1.png')} className='gou' onClick={this.check.bind(this,4)} />}
                </div>
                <p className='go_pay' onClick={this.pay.bind(this)}>立即支付</p>
			</div>
		)
	}
}
